<div class="easyui-layout" data-options="fit:true">

    <!--    菜单操作-->
    <div data-options="region:'north'" style="height:40px;border:0">
        <table style="padding:0;margin-left:5px">
            <tr>
                <td>
                    <a href="javascript:void(0);" class="easyui-linkbutton" id="menu-add-btn"
                       data-options="iconCls:'icon-add'"
                       onclick="addMenuButton();">添加菜单</a>
                    <a href="javascript:void(0);" class="easyui-linkbutton" id="menu-edit-btn"
                       data-options="iconCls:'icon-edit'"
                       onclick="updateMenuButton();">编辑菜单</a>
                    <a href="javascript:void(0);" class="easyui-linkbutton" id="menu-del-btn"
                       data-options="iconCls:'icon-remove'"
                       onclick="deleteMenuButton();">删除菜单</a>
                </td>
            </tr>
        </table>
    </div>

    <!--    菜单信息-->
    <div data-options="region:'center'" style="border:0;padding:5px;overflow:hidden;">
        <!--        菜单树-->
        <div style="width:20%;height:100%;overflow:auto;border:1px solid #ccc;float:left">
            <ul id="accMenu_tree"></ul>
        </div>

        <!--        单个菜单信息-->
        <div style="min-width:300px;width:30%;height:100%;overflow:auto;border:1px solid #ccc;float:left;">
            <form id="accMenu_info_form">
                <table style="margin:20px 0 0 20px;min-width:280px;" id="menu_info_table">
                    <input type="hidden" id="accMenu_info_form_id" name="id"/>
                    <input type="hidden" id="accMenu_info_form_parent_id" name="parent_id"/>
                    <input type="hidden" id="accMenu_info_form_type" name="type"/>
                    <input type="hidden" id="accMenu_info_form_status" name="status"/>

                    <tr>
                        <td>名称：</td>
                        <td><input class="easyui-textbox" id="accMenu_info_form_name" name="name" readonly="readonly"/></td>
                    </tr>
                    <tr>
                        <td>上级菜单：</td>
                        <td><input class="easyui-textbox" id="accMenu_info_form_parent_name" name="parent_name" readonly="readonly"/></td>

                    </tr>
                    <tr>
                        <td>地址：</td>
                        <td><input class="easyui-textbox" id="accMenu_info_form_url" name="url" readonly="readonly"/></td>
                    </tr>
                    <tr>
                        <td>排序：</td>
                        <td><input class="easyui-textbox" id="accMenu_info_form_order" name="order" readonly="readonly"/></td>
                    </tr>
                    <tr>
                        <td>图标：</td>
                        <td><input class="easyui-textbox" id="accMenu_info_form_icon" name="icon" readonly="readonly"/></td>
                    </tr>
                    <tr>
                        <td>是否可用：</td>
                        <td><input class="easyui-textbox" id="accMenu_info_form_status_name" name="status_name" readonly="readonly"/></td>
                    </tr>
                    <tr>
                        <td>创建时间：</td>
                        <td><input class="easyui-textbox" id="accMenu_info_form_create_time" name="ctime" readonly="readonly"/></td>
                    </tr>
                    <tr>
                        <td>更新时间：</td>
                        <td><input class="easyui-textbox" id="accMenu_info_form_update_time" name="utime" readonly="readonly"/></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
</div>

<!--编辑菜单-->
<div id="accMenu_edit_dialog">
    <form id="accMenu_edit_form" method="post">
        <table style="margin-bottom:20px;width:100%">
            <tr>
                <td><input type="hidden" id="accMenu_edit_form_id" name="id"/></td>
            </tr>
            <tr>
                <td style="text-align: right;">上级菜单:</td>
                <td><input id="accMenu_edit_form_father_id" name="parent_id"/></td>
            </tr>
            <tr>
                <td style="text-align: right;">名称:</td>
                <td><input class="easyui-textbox" id="accMenu_edit_form_name" name="name" required/></td>
            </tr>
            <tr>
                <td style="text-align: right;">菜单类型:</td>
                <td><input id="accMenu_edit_form_type" name="type"></td>
            </tr>
            <tr>
                <td style="text-align: right;">地址:</td>
                <td><input class="easyui-textbox" id="accMenu_edit_form_url" name="url" required/></td>
            </tr>
            <tr>
                <td style="text-align: right;">排序:</td>
                <td><input class="easyui-textbox" id="accMenu_edit_form_order" name="order" required/></td>
            </tr>
            <tr>
                <td style="text-align: right;">图标:</td>
                <td><input class="easyui-textbox" id="accMenu_edit_form_icon" name="icon"/></td>
            </tr>
            <tr>
                <td style="text-align: right;">状态:</td>
                <td><input id="accMenu_edit_form_status" name="status" required/></td>
            </tr>
        </table>
    </form>
</div>

<!--添加菜单-->
<div id="accMenu_add_dialog">
    <form id="accMenu_add_form" method="post">
        <table style="margin-bottom:20px;width:100%">
            <tr>
                <td style="text-align: right;">名称:</td>
                <td><input id="accMenu_add_form_name" name="name" class="easyui-textbox" required/></td>
            </tr>
            <tr>
                <td style="text-align: right;">菜单类型:</td>
                <td><input id="accMenu_add_form_type" name="type" required></td>
            </tr>
            <tr>
                <td style="text-align: right;">上级菜单:</td>
                <td><input id="accMenu_add_form_father_id" name="parent_id" required/></td>
            </tr>
            <tr>
                <td style="text-align: right;">地址:</td>
                <td><input id="accMenu_add_form_url" name="url" class="easyui-textbox" required/></td>
            </tr>
            <tr>
                <td style="text-align: right;">排序:</td>
                <td><input id="accMenu_add_form_order" name="order" class="easyui-textbox" required/></td>
            </tr>
            <tr>
                <td style="text-align: right;">图标:</td>
                <td><input id="accMenu_add_form_icon" name="icon" class="easyui-textbox"/></td>
            </tr>
            <tr>
                <td style="text-align: right;">状态:</td>
                <td><input id="accMenu_add_form_status" name="status" required/></td>
            </tr>
        </table>
    </form>
</div>

<script>
    var selectedMenuId = -1;

    $(function () {
        initMenuTree();
        initMenuComponents();
    });

    // 加载菜单树
    function initMenuTree() {
        $('#accMenu_tree').tree({
            url: '/queryMenus',
            animate:true,
            width: 200, height: 720,
            loadFilter: function (data) {
                if (data.data) return data.data;
                else return data;
            },
            onLoadSuccess: function (node, data) {
                if (data.length <= 0) {
                    return;
                }

                // $(this).tree("collapseAll");    // 折叠所有节点

                var n = "";
                if (selectedMenuId !== -1) {
                    n = $(this).tree('find', selectedMenuId);
                    selectedMenuId = -1;
                } else {
                    n = $(this).tree('find', data[0].id);
                }

                $(this).tree('select', n.target);
            },
            onSelect: function (node) {
                queryMenuById(node.id);
                selectedMenuId = node.id;
            }
        });
    }

    // 加载菜单组件
    function initMenuComponents() {
        $("#accMenu_edit_form_father_id").combogrid({
            url: '/queryAllDirMenus',
            idField: 'id', textField: 'name',
            panelWidth: 235, panelHeight: 200,
            editable: false,
            columns: [
                [
                    {field: 'id', title: '编号', width: 50},
                    {field: 'name', title: '名称', width: 100},
                    {field: 'type', title: '菜单类型', width: 80}
                ]
            ],
            loadFilter: function (data) {
                if (data.data) return data.data;
                else return data;
            },
            onClickRow: function (value, row, index) {}
        });

        $("#accMenu_add_form_father_id").combogrid({
            url: '/queryAllDirMenus',
            idField: 'id', textField: 'name',
            panelWidth: 235, panelHeight: 200,
            editable: false,
            columns: [
                [
                    {field: 'id', title: '编号', width: 50},
                    {field: 'name', title: '名称', width: 100},
                    {field: 'type', title: '菜单类型', width: 80}
                ]
            ],
            loadFilter: function (data) {
                if (data.data) return data.data;
                else return data;
            },
            onClickRow: function (value, row, index) {}
        });

        $('#accMenu_edit_form_status').combobox({
            valueField: 'id', textField: 'text',
            panelHeight: 70, editable: false,
            data: [
                {"id": 1, "text": "可用"},
                {"id": 0, "text": "不可用"}
            ]
        });

        $('#accMenu_add_form_status').combobox({
            valueField: 'id', textField: 'text',
            panelHeight: 70, editable: false,
            data: [
                {"id": 1, "text": "可用", "selected": true},
                {"id": 0, "text": "不可用"}
            ]
        });

        $('#accMenu_edit_form_type').combobox({
            valueField: 'id', textField: 'text',
            editable: false, readonly: true,
            disabled: true,
            panelHeight: 70,
            data: [
                {"id": 'DIR', "text": "目录菜单"},
                {"id": 'SUBMENU', "text": "子菜单"}
            ]
        });

        $('#accMenu_add_form_type').combobox({
            valueField: 'id', textField: 'text',
            editable: false,
            panelHeight: 70,
            data: [
                {"id": 'DIR', "text": "目录菜单"},
                {"id": 'SUBMENU', "text": "子菜单"}
            ],
            onSelect: function (node) {
                if (node.id === 'DIR') {
                    $('#accMenu_add_form_father_id').combogrid('disable')
                        .combogrid('setValue', '0')
                        .combogrid('setText', '目录菜单不可改');
                } else {
                    $('#accMenu_add_form_father_id').combogrid('enable')
                        .combogrid('setValue', '')
                        .combogrid('setText', '');
                }
            }
        });
    }

    // 根据 id 查询菜单
    function queryMenuById(id) {
        $.ajax({
            url: '/queryMenuById',
            type: "post",
            data: {id: id},
            dataType: "json",
            async: false,
            success: function (data) {
                if (data.code === 200) {
                    $("#accMenu_info_form").form('load', data.data);
                }
            }
        });
    }

    // 添加菜单
    function addMenuButton() {
        $('#accMenu_add_dialog').dialog({
            title: '添加菜单', iconCls: 'icon-add',
            width: 380, height: 350, modal: true, shadow: true,
            onClose: function () {
                $('#accMenu_add_form').form('clear').form('reset');
                $('#accMenu_add_form_status').combobox('setValue', '1');
            },
            buttons: [
                {
                    id: 'accMenu_add_dialogsave',
                    text: '保存', iconCls: 'icon-save',
                    handler: addMenu
                }, {
                    id: 'accMenu_add_dialogclose',
                    text: '关闭', iconCls: 'icon-clear',
                    handler: function () {
                        $("#accMenu_add_dialog").dialog("close");
                    }
                }
            ]
        });
    }

    function addMenu() {
        if (!$('#accMenu_add_form').form('validate')) {
            return;
        }

        $('#accMenu_add_form').form('submit', {
            url: '/addMenu',
            ajax: true,
            onSubmit: function () {},
            success: function (data) {
                data = JSON.parse(data);

                if (data.code !== 200) {
                    $.messager.alert("提示", "菜单添加失败！", 'info');
                    return;
                }

                $.messager.show({title: '提示', msg: '菜单添加成功！', timeout: 2000, showType: 'slide'});
                selectedMenuId = $('#accMenu_tree').tree('getRoot').id; // 添加完菜单，再重新加载菜单是，选择第一个

                $("#accMenu_add_dialog").dialog("close");
                $("#accMenu_tree").tree("reload");
            }
        });
    }

    // 编辑菜单
    function updateMenuButton() {
        var menu = $('#accMenu_tree').tree("getSelected");
        if (!menu) {
            $.messager.alert("提示", "请选择要编辑的菜单！", 'info');
            return;
        }

        // 加载编辑菜单内容
        $("#accMenu_edit_form").form('load', {
            id: $('#accMenu_info_form_id').val(),
            parent_id: $('#accMenu_info_form_parent_id').val(),
            name: $('#accMenu_info_form_name').val(),
            type: $('#accMenu_info_form_type').val(),
            url: $('#accMenu_info_form_url').val(),
            order: $('#accMenu_info_form_order').val(),
            icon: $('#accMenu_info_form_icon').val(),
            status: $('#accMenu_info_form_status').val()
        });

        // 顶级目录不可更改
        if ($('#accMenu_info_form_parent_id').val() === '0') {
            $('#accMenu_edit_form_father_id').combogrid('disable').combogrid('setValue', '目录菜单不可改');
        }

        $('#accMenu_edit_dialog').dialog({
            title: '编辑菜单', iconCls: 'icon-edit',
            width: 380, height: 350, modal: true, shadow: true,
            onClose: function () {
                $('#accMenu_edit_form_father_id').combogrid('enable');
                $('#accMenu_edit_form').form('clear').form('reset');
            },
            buttons: [
                {
                    id: 'accMenu_edit_dialogsave',
                    text: '保存', iconCls: 'icon-save',
                    handler: updateMenu
                }, {
                    id: 'accMenu_edit_dialogclose',
                    text: '关闭', iconCls: 'icon-clear',
                    handler: function () {
                        $("#accMenu_edit_dialog").dialog("close");
                    }
                }
            ]
        });
    }

    function updateMenu() {
        if (!$('#accMenu_edit_form').form('validate')) {
            return;
        }

        $('#accMenu_edit_form').form('submit', {
            url: '/updateMenu',
            ajax: true,
            onSubmit: function () {},
            success: function (data) {
                data = JSON.parse(data);

                if (data.code !== 200) {
                    $.messager.alert("提示", "菜单更新失败！", 'info');
                    return;
                }

                $.messager.show({title: '提示', msg: '菜单更新成功！', timeout: 2000, showType: 'slide'});

                $("#accMenu_edit_dialog").dialog("close");
                $("#accMenu_tree").tree("reload");
            }
        });
    }

    function deleteMenuButton() {
        var menu = $('#accMenu_tree').tree("getSelected");
        if (!menu) {
            $.messager.alert("提示", "请选择要删除的菜单！", 'info');
            return;
        }

        $.messager.confirm('确认', '您确认想要删除该菜单吗？', function (r) {
            if (!r) {
                return;
            }

            $.ajax({
                url: '/deleteMenuById',
                type: "post",
                data: {
                    id: menu.id,
                    type: $('#accMenu_info_form_type').val()
                },
                dataType: "json",
                async: false,
                success: function (data) {
                    if (data.code !== 200) {
                        $.messager.alert("提示", data.message, 'info');
                        return;
                    }

                    $.messager.show({title: '提示', msg: '删除菜单成功！', timeout: 2000, showType: 'slide'});
                    selectedMenuId = $('#accMenu_tree').tree('getRoot').id; // 删除完菜单，再重新加载菜单是，选择第一个
                    $("#accMenu_tree").tree("reload");
                }
            });
        });
    }
</script>